<template>
    <div>
        <setHeader :title="headTitle" @done="gotobtn()"></setHeader>
        <div class="content" @click="skiClick">
            <!-- <div style="font-size: 0.3rem; color: rgb(102, 102, 102); line-height: 0.5rem;height: 0.5rem;margin: 0.4rem 0;" v-if="colleagueList == ''">
                暂无数据  ╮(￣▽￣)╭
            </div> -->
            <el-row class="block-col-2">
                <el-col :span="24">
                    <el-dropdown trigger="click" @command="handleCommand">
                        <span class="el-dropdown-link" style="padding: 0 0.2rem;">
                            {{colleagueName}}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown" style="width: 100%;margin-left: -50% !important; margin-top:-0 !important;left:50% !important;padding:0.12rem 0 !important; max-height: 6rem;overflow-y: scroll;">
                            <el-dropdown-item icon="el-icon-plus" v-for="(colleague, ind) in colleagueList" :key="ind" :command="colleague" :style="colleague.style" >{{colleague.name}}</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-col>
            </el-row>   
            <!-- 同事渲染 -->
            <div>
                <!-- <div style="font-size: 0.3rem; color: rgb(102, 102, 102); line-height: 0.5rem;height: 0.5rem;margin: 0.4rem 0;" v-if="colleagues == ''">
                    暂无数据  ╮(￣▽￣)╭
                </div> -->
                <div v-if="colleagues == ''" class="contentEmpty" style="margin-top: .6rem; margin-bottom: 0.8rem;">
                    <img src="../common/images/Disappointment.png" alt="">
                    <em>暂无查询结果</em>
                </div>
                <div v-else class="business_bar_slide" v-for="(bus, index) in colleagues" :key="index" data-type="0">
                    <div class="business_lists_colleague clear" @touchstart.capture="touchStart" @touchend.capture="touchEnd">
                        <div class="business_left_colleague fl">
                            <img :src="bus.userhead" alt="" v-if="bus.userhead">
                            <img src="../common/images/userAvatar.png" alt="" v-else>
                        </div>
                        <div class="business_desc_colleague fl">
                            <h5>{{bus.username}}</h5>
                            <p>{{bus.d_name}}</p>
                        </div>
                    </div>
                    <div class="delete" @click="deleteItem" :data-index="index">删除</div>
                </div>
            </div>
            <!-- 添加同事 -->
            <div class="mycard_insert" @click="createColleagues">
                <i class="iconfont icon-icon02"></i>添加同事
            </div>
        </div>
         <!-- 添加同事 -->
        <ViewModal :modalState.sync="viewState">
            <insertColleague @closedone="closePageModal" @setdone="goback" @savedone="savedone" :ddeId="deId"></insertColleague>
        </ViewModal>
        <so-footer></so-footer>
    </div>
</template>

<script>
import setHeader from '@/public/setHeader';
import insertColleague from './insertColleague';
import ViewModal from "@/components/View";
import soFooter from '../components/footer-bar';
    export default {
        data() {
            return {
                // path:'http://fc.x.e000.com',
                headTitle: '我的同事列表',
                colleagueList: [],
                colleagueName: '',
                colleagues: [],
                userInfo: '',
                cpId: '',
                deId: '',
                startX : 0 ,
                endX : 0 ,
                viewState: false,
                deIdd:'',
            }
        },
        mounted() {
            this.userInfo = JSON.parse(window.localStorage.getItem('userInfo'));
            this.cpId = this.$route.query.cp_id;
            this.deId = this.$route.query.deId;
            this.colleagueName = this.$route.query.deName;
            this.getDepartUser(this.deId);
            this.getDepartSame(0);
        },
        methods: {
            // 获取企业组织架构搜索同事  li 的列表
            getDepartUser(deIdd) {
                this.$fetch(this.$path + '/index.php/api/company/getDepartUser/'+deIdd+ '/' +this.cpId+'/1').then((response) => {
                    console.log('同事渲染',response);
                    if(response.code == 200) {
                        this.colleagues = response.data;
                    }
                })
            },
            // 组织架构
            getDepartSame() {
                this.$post(this.$path+'/api.php/company/getCompanyAuthi',{cp_id:this.cpId,access_token:this.access_token}).then((response) => {
                // this.$fetch(this.$path + '/index.php/api/company/getDepartSame/'+this.deId+ '/' +this.cpId).then((response) => {
                    console.log('搜索同事',response);
                    if(response.code == 200) {
                        this.colleagueList = response.data;
                        let aa = {'id':0,'name':'全部同事','level':0};
                        this.colleagueList.unshift(aa);
                        this.colleagueList.forEach((element,index) => {
                            if(element.level == 1) {
                                this.colleagueList[index].style = 'padding-left: 0.2rem';
                            }else if(element.level == 2){
                                this.colleagueList[index].style = 'padding-left: 0.6rem';
                            }else if(element.level == 3){
                                this.colleagueList[index].style = 'padding-left: 1rem';
                            }
                        });
                        // let aa = {'id':0,'name':'全部同事'};
                        // this.colleagueList.unshift(aa);
                        // console.log('aa',this.colleagueList)
                        // for(let i in this.colleagueList) {
                        //     this.colleagueName = this.colleagueList[i].name;
                        // }
                        // console.log(colleague.name);
                    }
                })
            },
            gotobtn() {},
            handleCommand(command) {
                let deId = command.id;
                this.deId = command.id;
                this.colleagueName = command.name;
                let type =1;//状态 1已审核
                this.$fetch(this.$path + '/index.php/api/company/getDepartUser/'+deId+ '/' +this.cpId+'/'+type).then((response) => {
                    console.log('同事渲染1',response);
                    if(response.code == 200) {
                        this.colleagues = response.data;
                    }else{
                        this.colleagues = [];
                    }
                })
            },
            // 关闭
            closePageModal() {
                this.viewState = false;
            },
            // 返回关闭
            goback() {
                this.viewState = false;
            },
            // 保存
            savedone(data) {
                let ids = '';
                for(let i in data) {
                    ids = ids +','+data[i].uid;
                }
                this.viewState = false;
                if(ids == ''){
                    this.$openTips({
                        text: '不能为空',
                        time: 1000
                    })
                    return false;
                }
                console.log('01235',ids);
                this.$fetch(this.$path + '/index.php/api/company/updateDepart/'+this.deId+ '/' +this.cpId+'/'+ids).then((response) => {
                    console.log('同事渲染2',response);
                    if(response.code == 200) {
                        // this.colleagues = response.data;
                        this.getDepartUser(this.deId);
                    }else{
                        this.colleagues = [];
                    }
                })
            },
            //滑动开始
            touchStart(e){
                // 记录初始位置
                this.startX = e.touches[0].clientX;
            },
            //滑动结束
            touchEnd(e){
                // 当前滑动的父级元素
                let parentElement = e.currentTarget.parentElement;
                // 记录结束位置
                this.endX = e.changedTouches[0].clientX;
                // 左滑
                if( parentElement.dataset.type == 0 && this.startX - this.endX > 30 ){
                    this.restSlide();
                    parentElement.dataset.type = 1;
                }
                // 右滑
                if( parentElement.dataset.type == 1 && this.startX - this.endX < -30 ){
                    this.restSlide();
                    parentElement.dataset.type = 0;
                }
                this.startX = 0;
                this.endX = 0;
            },
            //判断当前是否有滑块处于滑动状态
            checkSlide(){
                let listItems = document.querySelectorAll('.business_bar_slide');
                for( let i = 0 ; i < listItems.length ; i++){
                    if( listItems[i].dataset.type == 1 ) {
                        return true;
                    }
                }
                return false;
            },
            //复位滑动状态
            restSlide(){
                let listItems = document.querySelectorAll('.business_bar_slide');
                // 复位
                for( let i = 0 ; i < listItems.length ; i++){
                    listItems[i].dataset.type = 0;
                }
            },
            //  点击恢复复位状态
            skiClick() {
                // 复位
                this.restSlide();
            },
            //删除
            deleteItem(e){
                // 当前索引
                let index = e.currentTarget.dataset.index;
                // 复位
                this.restSlide();
                // 删除
                this.colleagues.splice(index,1);
            },
            // 添加同事
            createColleagues() {

                // this.$router.push({path: '/insertColleague', query: {cp_id:this.cpId,deId:this.deId}});
                this.viewState = true;
                console.log('添加同事');
            },
        },
        components: {
            setHeader,
            insertColleague,
            ViewModal,
            soFooter
        }
    }
</script>

<style>
.el-row {
    border-bottom: 0.2rem solid #f5f5f5;
}
/* 全部同事 */
.el-col-24 {
    height: 1rem;
    line-height: 1rem;
    /* padding: 0 0.2rem; */
    box-sizing: border-box;
}
/* 全部同事第一层级 */
.el-col-24 .el-dropdown {
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    box-shadow: none;
    font-weight: 400;
    font-style: normal;
    text-align: left;
    display: block;
}
/* 文字 */
 .el-dropdown-link {
    height: 1rem;
    line-height: 1rem;
    font-size: 0.28rem;
    color: #333;
    cursor: pointer;
    display: block;
}
  /* 下拉icon */
.el-icon--right {
    float: right;
    height: 1rem;
    line-height: 1rem;
    font-size: 0.28rem;
    color: #333;
}
/* 下拉层级 */
.el-dropdown-menu {
    /* width: 100%;
    height: auto;
    box-shadow: none;
    top: 1.88rem !important;
    left: 0 !important;
    margin: 0;
    padding: 0;
    margin-top: 0 !important; */
}
/* 三角符号 */
.el-popper .popper__arrow, .el-popper .popper__arrow::after {
    display: none;
}
/* 下拉item */
.el-dropdown-menu__item {
    height: 1rem;
    line-height: 1rem;
    font-size: 0.28rem;
    color: #333;
    padding: 0 0.2rem;
    box-sizing: border-box;
}

/* 渲染同事-滑动动画样式 */
.business_bar_slide {
    position: relative;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
.business_bar_slide[data-type="0"]{
  transform: translate3d(0,0,0);
}
.business_bar_slide[data-type="1"]{
  transform: translate3d(-2rem,0,0);
}
.business_bar_slide:after{
  content: " ";
  position: absolute;
  left: 0.2rem;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid #ccc;
  color: #ccc;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  z-index: 2;
}


/* 同事渲染 */
.business_lists_colleague {
    height: 1.48rem;
    line-height: 1.48rem;
    border-bottom: 1px solid #d8d8d8;
}
.business_lists_colleague .business_left_colleague {
    width: 1rem;
    height: 1rem;
    margin: 0.23rem;
}
.business_lists_colleague .business_left_colleague img {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    vertical-align: super;
}
.business_desc_colleague {
    margin: 0.25rem;
    width: 4.2rem;
    text-align: left;
}
.business_desc_colleague h5 {
    font-size: 0.28rem;
    color: #333;
    line-height: 0.48rem;
    height: 0.48rem;
    width: 4.4rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
}
.business_desc_colleague p {
    font-size: 0.24rem;
    color: #666;
    padding-bottom: 0;
    background-color: transparent;
    width: 4.2rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    height: 0.48rem;
    line-height: 0.48rem;
}
/* 滑动出删除 */
.business_bar_slide .delete{
  width: 2rem;
  height: 1.48rem;
  background: #ff4949;
  font-size: 0.34rem;
  color: #fff;
  text-align: center;
  line-height: 1.48rem;
  position: absolute;
  top:0;
  right: -2rem;
}
/* 添加同事 */
.mycard_insert {
    height: 1.5rem;
    width: 7rem;
    border: 1px dashed #d8d8d8;
    text-align: center;
    margin: 0.4rem auto;
    font-size: 0.4rem;
    line-height: 1.5rem;
    color: #999;
}
.mycard_insert .icon-icon02 {
    font-size: 0.48rem;
    vertical-align: middle;
    line-height: 1.5rem;
    display: inline-block;
    margin-right: 0.2rem;
}

  .el-icon-arrow-down {
    font-size: 12px;
  }
  .demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
  }
</style>